<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css"/>
    <link rel="stylesheet" href="css/styles.css"/>

    <script type="text/javascript" charset="utf-8" src="lib/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/jqm-config.js"></script>
    <script type="text/javascript" charset="utf-8" src="lib/jquery.mobile-1.1.0.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="lib/underscore-min.js"></script>
    <script type="text/javascript" charset="utf-8" src="lib/backbone-min.js"></script>
	<script type="text/javascript" charset="utf-8">
var TodoItem = Backbone.Model.extend({
	finish: function() {
		this.set({"status": "complete"});
	}
});
		var todoItem = new TodoItem(
			{description: "Learning Backbone.js", status: "incomplete", id: 1}
		);
		console.log(todoItem.get("description"));
		// todoItem.set({status: "complete"});
		console.log(todoItem.get("status"));
	var TodoView = Backbone.View.extend({
		
		template: _.template("<h3><%= description %>: <%= status %></h3>"),
		
		initialize: function() {
			this.model.on("change:status", this.render, this);
		},
		
		render: function() {
			var json = this.model.toJSON();
			$(this.el).html(this.template(json));
		},
	});
		var todoView = new TodoView({model: todoItem});
		todoView.render();
		
		var TodoList = Backbone.Collection.extend({
			model: TodoItem
		});
		var todoList = new TodoList();
		var todoItem2 = new TodoItem(
			{description: "Learning jQuery Mobile", status: "incomplete", id: 2}
		);
		todoList.add(todoItem);
		todoList.add(todoItem2);
		var todos = [
			{description: "Learning Backbone.js", status: "incomplete", id: 1},
			{description: "Learning jQuery Mobile", status: "incomplete", id: 2},
			{description: "Learning PhoneGap", status: "incomplete", id: 3}
		];
		todoList.reset(todos);
		todoList.on("add", function(todoItem){
			console.log(todoItem.id);
		});
	</script>
</head>

<body></body>

</html>